<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/ui/";
%>

<!DOCTYPE HTML>
<html>
<head>
<base href="<%=basePath%>">
<title>Home</title>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css"
	media="all" />
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery.min.js"></script>
<!-- Custom Theme files -->
<!--theme-style-->
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<!--//theme-style-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords"
	content="New Store Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template, 
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" />
<script type="application/x-javascript">
	 addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } 
</script>
<!--fonts-->

<!--//fonts-->
<!-- start menu -->
<link href="css/memenu.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript" src="js/memenu.js"></script>
<script>
	$(document).ready(function() {
		$(".memenu").memenu();
	});
</script>
<script src="js/simpleCart.min.js">
	
</script>
</head>
<body>
	<%@include file="/ui/head.jsp"%>

	<div class="banner">
		<div class="container">
			<script src="js/responsiveslides.min.js"></script>
			<script>
				$(function() {
					$("#slider").responsiveSlides({
						auto : true,
						nav : true,
						speed : 500,
						namespace : "callbacks",
						pager : true,
					});
				});
			</script>
			<div id="top" class="callbacks_container">
				<ul class="rslides" id="slider">
					<li>

						<div class="banner-text">
							<h3>物理</h3>
							<p>物理是一门研究物质结构、物质相互作用和运动规律的自然科学，如果说数学是一座皇冠，那么物理就是镶在皇冠上的宝石。</p>
							
						</div>

					</li>
					<li>

						<div class="banner-text">
							<h3>化学</h3>
							<p>探究反应的原理，认识化学的魅力</p>
							

						</div>

					</li>
					<li>
						<div class="banner-text">
							<h3>生物</h3>
							<p>认识生物的本质，探究人类的起源</p>
							

						</div>

					</li>
				</ul>
			</div>

		</div>
	</div>
	<div class="copyrights">
		
	</div>
	<!--content-->
	<div class="content">
		<div class="container">
			<div class="content-top">
				<h1>最赞实验</h1>
				<div class="grid-in">

					<c:forEach items="${video1 }" var="video1">
						<div class="col-md-4 grid-top">
							<a
								href="<c:url value='/VideoServlet?method=findByspid&spid=${video1.spid }'/>"
								class="b-link-stripe b-animate-go  thickbox"><img 
								class="img-responsive" src="images/${video1.sptpurl }" alt="" width="285px" height="290px">
								<div class="b-wrapper">
									<h3 class="b-animate b-from-left    b-delay03 ">
										<span>观看实验</span>
									</h3>
								</div> </a>
							<p>
								<a href="single.html">${video1.spname }||${video1.spdz }赞</a>
							</p>
						</div>
					</c:forEach>
					<div class="clearfix"></div>
				</div>

			</div>
			<!----->

			<div class="content-top-bottom">
				<h2>最新实验</h2>
				<div class="grid-in">



					<c:forEach items="${video2 }" var="video2">
						<div class="col-md-4 grid-top">
							<a
								href="<c:url value='/VideoServlet?method=findByspid&spid=${video2.spid }'/>"
								class="b-link-stripe b-animate-go  thickbox"><img  
								class="img-responsive" src="images/${video2.sptpurl }" alt="" width="285px" height="290px">
								<div class="b-wrapper">
									<h3 class="b-animate b-from-left    b-delay03 ">
										<span>观看实验</span>
									</h3>
								</div> </a>
							<p>
								<a href="single.html">${video2.spname }||time:${video2.sptime }</a>
							</p>
						</div>
					</c:forEach>
					<div class="clearfix"></div>
				</div>

				<div class="clearfix"></div>
			</div>
			<!--  -->
			<div class="content-top">
				<h1>最多下载实验</h1>
				<div class="grid-in">

					<c:forEach items="${video3 }" var="video3">
						<div class="col-md-4 grid-top">
							<a
								href="<c:url value='/VideoServlet?method=findByspid&spid=${video3.spid }'/>"
								class="b-link-stripe b-animate-go  thickbox"><img 
								class="img-responsive" src="images/${video3.sptpurl }" alt="" width="285px" height="290px">
								<div class="b-wrapper">
									<h3 class="b-animate b-from-left    b-delay03 ">
										<span>观看实验</span>
									</h3>
								</div> </a>
							<p>
								<a href="single.html">${video3.spname }||下载数:${video3.spxz }</a>
							</p>
						</div>
					</c:forEach>
					<div class="clearfix"></div>
				</div>

			</div>

			<h1>&nbsp;</h1>
		</div>


		<%@include file="/ui/foot.jsp"%>
</body>
</html>
